import React from "react";
// import { useState } from "react";
import "./Todofooter.css";

export default function Todofooter(props) {
  let { todo, claerfinish, checkall } = props;
  let finish = () => {
    claerfinish();
  };

  let all = () => {
    checkall(!todo.every((item) => item.done));
  };

  return (
    <>
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            checked={todo.every((item) => item.done) && todo.length !== 0}
            onChange={all}
          />
        </label>
        <span>
          <span>已完成{todo.filter((item) => item.done === true).length}</span>/
          全部{todo.length}
        </span>
        <button className="btn btn-danger" onClick={finish}>
          清除已完成任务
        </button>
      </div>
    </>
  );
}
